<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图</title>
    <script src="./js/echarts.min.js"></script>
</head>
<body>
    <div id="app" style="width:1400px; height:860px"></div>
    <script>
        var mychart = echarts.init(document.getElementById("app"));
        var option = {
            title:{text:"中国地图"},
            tooltip:{},
            series:[
                {name:"china",type:"map",data:[]}
            ]
        }
        mychart.setOption(option);
        // 加载地图的数据
        function getMap(obj={en:'china'}){
                // ES6 ajax请求内置api 发起get请请求
                fetch("./map/json/province/"+obj.en+".json")
                // 默认获取的数据流，转换为json格式（固定的格式）
                // res=>res.text() 也可以转换为文本（固定的格式）
                .then(res=>res.json())
                // 获取成功
                .then(res=>{
                    // echarts 注册地图
                    echarts.registerMap(obj.en,res);
                    // 修改option
                    option.series[0].mapType = obj.en;
                    // 更新地图选项
                    mychart.setOption(option)
                })
                // 网络请求失败
                .catch(err=>console.log(err))
        }
        getMap();

    </script>
</body>
</html>